import style from './index.less';

('@ant-design/icons');
import React, { useState } from 'react';
import request from '@/http';
import { history } from '@/.umi/core/history';
import {
  DatePicker,
  Space,
  Input,
  Select,
  Table,
  Tag,
  Tabs,
  Button,
  Form,
} from 'antd';
import All_style from '../../index.less';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;
const columns = [
  {
    title: '日期',
    dataIndex: 'data',
    key: 'data',
  },
  {
    title: '学号',
    dataIndex: 'student_no',
    key: 'student_no',
  },
  {
    title: '姓名',
    dataIndex: 'student_name',
    key: 'student_name',
  },
  {
    title: '打卡时间',
    dataIndex: 'Time',
    key: 'Time',
  },
  {
    title: '打卡设备',
    dataIndex: 'adress',
    key: 'adress',
  },
];
const dataOld = [
  {
    key: '1',
    data: '2021-7-8',
    work_pubtime: '2021-6-8',
    student_no: '189000531',
    student_name: '裴章燕',
    Time: '2021-6-2',
    adress: '6501',
  },
];

export default function person() {
  const [formObject] = Form.useForm();
  const [data, setData] = React.useState(dataOld);

  interface pageInfoTypes {
    current: number;
    pageSize: number;
    total: number;
    onChange: any;
  }

  const onCurrentChange = (page, pageSize) => {
    loadData(page, pageInfo.pageSize);
  };
  const [pageInfo, setPageInfo] = useState<pageInfoTypes>({
    current: 1,
    pageSize: 5,
    total: 0,
    onChange: onCurrentChange,
  });

  const loadData = async (current, pageSize) => {
    const datas = await formObject.validateFields();
    console.log('OK');

    const result: any = await request.post('/attendance_manage/ask/st_attend', {
      page: current,
      number: pageSize,
      ...datas,
      ear_checkdate: datas?.vacationSubmitDate
        ? datas?.vacationSubmitDate[1]?.format('YYYY-MM-DD HH:mm:ss')
        : '',
      bar_checkdate: datas?.vacationSubmitDate
        ? datas?.vacationSubmitDate[0]?.format('YYYY-MM-DD HH:mm:ss')
        : '',
    });
    console.log(result.data);
    if (result.success) {
      const newData = result.data.returnDate.map((d) => {
        return {
          id: d.id,
          key: `key_{d.id}`,
          data: d.ar_checkdate,
          student_no: d.student_no,
          student_name: d.student_name,
          Time: d.punch_time,
          adress: d.punch_equipment,
        };
      });
      setData(newData);
      setPageInfo({
        current: result?.data?.paginationData?.currentPage,
        pageSize: result?.data?.paginationData?.number,
        total: result?.data?.paginationData?.sum,
        onChange: pageInfo.onChange,
      });
    }
  };
  const onReset = () => {
    formObject.resetFields();
    loadData(pageInfo.current, pageInfo.pageSize);
  };
  React.useEffect(() => {
    loadData(pageInfo.current, pageInfo.pageSize);
  }, []);

  return (
    <div className={All_style.box}>
      <Form name="SelectprosonForm" form={formObject} preserve={false}>
        <div>
          <Form.Item
            name="vacationSubmitDate"
            label="申请提交日期："
            style={{ float: 'left' }}
            className={All_style.data}
          >
            <RangePicker showTime className={All_style.select} />
          </Form.Item>

          <Button
            className={All_style.button}
            onClick={() => {
              loadData(pageInfo.current, pageInfo.pageSize);
            }}
          >
            查询
          </Button>
          <Button
            className={All_style.button2}
            onClick={() => {
              onReset();
              // loadData(pageInfo.current, pageInfo.pageSize);
            }}
          >
            重置
          </Button>
        </div>
      </Form>
      <Table
        columns={columns}
        dataSource={data}
        className={All_style.table}
        pagination={pageInfo}
      />
    </div>
  );
  // };
}
